<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.agent.userName }}
          </span>
          <el-tag type="warning" size="small" style="margin-right: 20px">
            <span v-if="formData.agent.tradeStatus === ''">准兼职</span>
            <span v-if="formData.agent.tradeStatus === '1'">正式兼职</span>
          </el-tag>
          <el-tag type="warning" size="small">
            {{ getLabel('agent_status_person', formData.agent.agentStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlEdit(formData.agent.id)">变更信息
        </el-button>
      </template>
    </header-module>
    <div class="main-content">
      <el-form :inline="true" label-position="right" size="small" class="filter-form-inline">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4" class="col">
            <el-form-item label="兼职编号：">
              {{ formData.agent.agentNumber }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="兼职级别：">
              {{ getLabel('agent_person_level', formData.agent.agentLevel) }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：" class="item_col">
              {{ formData.agent.address }}
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xs="4">
            <el-form-item label="兼职人员姓名：">
              <span>{{ formData.agent.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="性别：" class="item_col">
              <span v-if="formData.agent.sex === '1'">男</span>
              <span v-if="formData.agent.sex === '2'">女</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="联系电话：">
              <span>{{ formData.agent.tel }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="身份证：">
              <span>{{ formData.agent.cardNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="创建人：">
              <span>{{ formData.agent.creatorName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="创建时间：">
              <span>  {{ dateFormat("yyyy-mm-dd HH:MM:SS",formData.agent.createdAt) }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="24" :xs="4">
            <el-form-item label="身份证附件：">
              <div v-for="(item,index) in formData.agent.cardFiles" :key="index" class="file-item">
                <image-upload-view disabled="true" :data="item" :disabled="disabled" />
              </div>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <formPersonnel ref="formPersonnel" @succsess="succsess" />
  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Index',
  components: {
    formPersonnel: defineAsyncComponent(
      () => import('../../../channel/modules/partTimeBigBag/formPersonnel.vue'))
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    const data = reactive({
      formData: {
        agent: {},
        contract: {}
      },
      formPersonnel: null
    })

    const handlBack = () => {
      router.go(-1)
    }

    const handlEdit = (row) => {
      data.formPersonnel.open(row, 2)
    }

    const succsess = () => {
      handlDetail(route.query.id)
    }

    const handlDetail = async(id) => {
      const res = await api.channelAgent.POTENTIALAGENT_DETAIL(id)
      if (res.code === 0) {
        data.formData.agent = res.data.agent
        data.contractData.id = data.formData.agent.id
        data.contractData.name = data.formData.agent.userName
      }
    }

    //* *****************
    onMounted(_ => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    })

    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlEdit,
      succsess
    }
  }

}

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
